<template>
<div class="weui-uploader">
  <cell class="weui-uploader__hd">
    <span slot="body"><slot name="title"></slot></span>
    <span slot="footer" v-if="count >= 0 && maxlength > 0">{{count}}/{{maxlength}}</span>
  </cell>
  <div class="weui-uploader__bd">
    <slot name="uploader-files"></slot>
    <div class="weui-uploader__input-box" v-if="hasInput">
      <input ref="input" type="file" class="weui-uploader__input" accept="image/jpg,image/jpeg,image/png,image/gif" multiple @change="dispatchChange"

      >
    </div>
  </div>
</div>
</template>

<script>
import Cell from "./cell.vue";
import _ from "lodash";
import ImageUtils from "../../libs/image.js";
import Constants from "@/libs/constants.js"
import Utils from "@/libs/util"

const NEED_COMPRESS = true;

export default {
    name: "uploader",
    props: {
        /**
        * 已上传文件数量
        * 注意，Uploader并不会对真实文件数量进行控制，count仅用于显示
        */
        count: {
            type: Number,
            required: false,
            default:0,
            validator: function(value) {
                return value >= 0;
            }
        },
        /**
        * 显示的最大可上传数量
        * 注意，Uploader并不会对真实文件数量进行控制，maxlength仅用于显示
        */
        maxlength: {
            type: Number,
            required: false,
            validator: function(value) {
                return value > 0;
            }
        },
        /**
        * 是否包含input元素
        */
        hasInput: {
            type: Boolean,
            required: false,
            default: true
        }
    },
    data(){
        return{
            inputValue:""
        }
    },
    methods: {
        dispatchChange(event) {
            const oFiles = event.target.files;
            if (oFiles.length === 0) {
                this.$Message.error("未发现图片")
                this.$refs['input'].value=""
                return true;
            }

            let num = this.count + oFiles.length
            if(num > this.maxlength){
                this.$Message.error("图片最多可上传"+this.maxlength+"张")
                this.$refs['input'].value=""
                return true
            }
            let _this = this
            _.map(oFiles, (file,index) => {

                if (NEED_COMPRESS) {
                    ImageUtils.compress(file, {
                        compress: {
                            width: Constants.IMG_WIDTH_MAX,
                            height: Constants.IMG_HEIGHT_MAX,
                            quality: 0.8,
                        },
                        type: 'file'
                    }, (res,w,h) => {
                        if (res) {
                            this.$emit("fileAdd",res,w,h)
                        }
                        //上传完成
                        if(index == oFiles.length -1){
                            _this.$refs['input'].value=""
                        }
                    })
                }

            })

        }
    },
    components: {
        Cell
    }
};
</script>